<template>
  <div :id="id" class="main" :style="{ width: '100%', height: '80px' }"></div>
</template>

<script>
export default {
  name: "HistoryNum",
  props: {
    height: {
      type: String,
      default: "300px"
    },
    text: {
      type: String,
      default: "柱状图"
    },
    itemArray: {
      type: Array,
      default: () => ["图例1", "图例2"]
    },
    dataSource: {
      type: Object,
      default: () => ({})
    },
    description: {
      type: String,
      default: "文本描述"
    }
  },
  data() {
    return {
      myChart: "",
      id: "historyNumId"
    };
  },
  computed: {},
  methods: {
    setOption() {
      this.myChart.setOption({
        color: ["#8be2d0"],

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.dataSource.column,
          // x轴的字体样式
          axisLabel: {
            show: false
          },
          // x轴的颜色和宽度
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            //网格线
            show: false
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            //网格线
            show: false
          }
        },
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     // 坐标轴指示器，坐标轴触发有效
        //     type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        //   }
        // },
        tooltip: {
          trigger: 'axis',
          formatter: function(params, callback) {
            return params[0].marker + params[0].axisValue + "</br>入库数量：" + params[0].data;
          }
        },
        grid: {
          left: "12%",
          right: "8%",
          bottom: "18%",
          top: "18%",
          containLabel: true
        },
        series: [
          {
            data: this.dataSource.values,
            type: "line",
            areaStyle: {}
          }
        ]
      });
    },

    //初始化
    initEcharts() {
      let echarts = require("echarts");
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById(this.id), "light");
      // 绘制图表
      this.setOption();
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  },
  mounted() {},
  watch: {
    dataSource: function() {
      this.setOption();
    }
  }
};
</script>
